<template>
    <el-card shadow="never" style="max-height: 700px; overflow: auto">
        <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
            <el-form-item label="id:" prop="id" v-show="false">
                <el-input v-model="form.id" disabled />
            </el-form-item>
            <el-form-item label="站点名称:" prop="site_name">
                <el-input v-model="form.site_name" placeholder="请输入站点名称" disabled clearable />
            </el-form-item>
            <el-form-item label="域名:" prop="site_url">
                <el-input v-model="form.site_url" placeholder="请输入域名" disabled />
            </el-form-item>
            <el-form-item label="站点类型:" prop="site_type">
                <el-select v-model="form.site_type" placeholder="请输入站点类型" disabled clearable>
                    <el-option v-for="(item, index) in site_type" :key="index" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="账号:" prop="apikey">
                <el-input v-model="form.apikey" placeholder="请输入账号" disabled />
            </el-form-item>
            <el-form-item label="密码:" prop="apisecret">
                <el-input v-model="form.apisecret" placeholder="请输入密码" disabled />
            </el-form-item>
            <el-form-item label="站点状态:" prop="week">
                <el-select v-model="form.status" placeholder="请输入站点状态" clearable>
                    <el-option v-for="(item, index) in status" :key="index" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="站点:" prop="international_sites">
                    <el-radio-group v-model="form.international_sites" size="mini">
                        <el-radio-button label="美国站"></el-radio-button>
                        <el-radio-button label="欧洲站"></el-radio-button>
                    </el-radio-group>
            </el-form-item>
            <!-- <el-form-item label="归属用户:" prop="adminid"> -->
                <!--请将show_field，query_field =后面的id换成要展示和检索的字段，如 name或者title  ----->
                <!-- <SelectPage v-model="form.adminid" :url="'/admin/system.admin/selectPage'" show_field="nickname" query_field="nickname" :multiple="false" /> -->
            <!-- </el-form-item> -->
            <!-- <el-form-item label="广告账号:" prop="advplat_id">
                    <SelectPage v-model="form.advplat_id" :url="'/admin/advplat/index'" show_field="site_name" placeholder="请选择账号" query_field="site_name" :multiple="true" />
                </el-form-item> -->
                
            <el-form-item>
                <el-button type="primary" @click="submitForm">确认 </el-button>
                <el-button type="warning" @click="cancel">取消 </el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
export default {
    name: 'EditForm',
    props: {
        findFormData: {
            type: Object,
            default: {},
        },
        editFormParams: {
            type: Object,
            default: {},
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {
                site_name: [{ required: true, message: '请输入站点名称', trigger: 'blur' }],
                site_url: [{ required: true, message: '请输入域名', trigger: 'blur' }],
                apikey: [{ required: true, message: '请输入账号', trigger: 'blur' }],
                apisecret: [{ required: true, message: '请输入密码', trigger: 'blur' }],
            },
            form: {
                labels: [
                    {
                        key: '',
                        value: '',
                    },
                    {
                        key: '',
                        value: '',
                    },
                    {
                        key: '',
                        value: '',
                    },
                ],
            },
            status: [
                { label: '正常', value: 'normal' },
                { label: '未启用', value: 'hidden' },
                { label: '无效店铺', value: 'unavailable' },
            ],
            site_type: [
                { label: 'shopify', value: 1 },
                { label: '店匠', value: 2 },
            ],
        }
    },
    watch: {
        findFormData: {
            handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        removeAccount(item) {
            var index = this.form.labels.indexOf(item)
            if (index !== -1) {
            this.form.labels.splice(index, 1)
            }
        },
        addAccount() {
            console.log('testhis.form.labelt',this.form.labels);
            
            this.form.labels.push({
                        key: '',
                        value: '',
                    },);
        },
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },

        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', this.form)
                }
            })
        },

        // 表单重置
        reset() {
            this.resetForm('form')
        },
    },
}
</script>
